<template>
  <div class="bodyt">
	   <div class="main-form">
		   <div class="logo">
                <img src="../images/logo.png" alt="">
				<div>联盟商家管理系统</div>
		   </div>
			 <div v-if="showReg">
					<h5>欢迎注册</h5>
					<div class="inputBox">
					<div class="infoBox">
						<div class="inputBox">
							<i class="phoneIcon"></i>
							<input
								placeholder="请输入手机号/邮箱"
								v-model="phone">
						</div>
										<div class="inputBox">
							<i class="passwordIcon"></i>
							<input
								placeholder="6-20字符，必须同时包含数字和字母"
								prefix-icon="el-icon-search"
								v-model="password">
							</div>
						<div class="inputBox">
							<i class="passwordIcon"></i>
							<input
								placeholder="再次输入密码"
								v-model="passwordConfirm">
						</div>
					</div>
					<div class="codeBox">
						<div class="inputBox">
							<i class="codeIcon"></i>
							<input
								placeholder="输入验证码"
								v-model="code">
						</div>
						<button>获取验证码</button>
					</div>
					</div>
					<button class="registerBtn"  @click="openRegOk">注册</button>
					<a href="/" class="StateSwitch">已有帐号？立即登录</a>
			</div>
			<div v-show="showRegOk">
				 <div class="regOkImg">注册成功</div>
				 <p class="regOkTxt">注册成功，您可以登录体验或验证成为医药物联网商家享受更多尊贵体验</p>
				 <div class="regOkBtn">
						<a href="#">登录体验</a>
						<a href="#">去认证成为商家</a>
				 </div>
			</div>
	   </div>
	   <div class="gradientBgColor" v-if="showReg"></div>
		 <div class="threeCanvas" v-show="showReg"></div>
		 <canvas class="spiderWebCanvas"  v-show="showRegOk"></canvas>
  </div>
</template>
<script>
import { threeCanvas } from '../../../static/js/three-canvas.js';
import { spiderWebCanvas } from '../../../static/js/spiderWeb-canvas.js';
export default {
  data() {
    return {
      visible: false,
      phone: "",
      password: "",
      passwordConfirm: "",
			code: "",
			showReg:true,
			showRegOk:false,
    };
  },
  methods: {
    openRegOk() {
			this.showReg = false;
			this.showRegOk = true;
    }
  },
  mounted() {
		threeCanvas();
		spiderWebCanvas();
  }
};
</script>
<style lang="less" scoped>
@import "reg.less";
</style>
